import React from 'react';
import {
  IonCard,
  IonCardHeader,
  IonCardContent,
  IonCardTitle,
  IonItem,
  IonLabel,
  IonBadge,
} from '@ionic/react';

interface Order {
  id: string;
  status: '已完成' | '已支付' | '待支付';
}

interface OrderListProps {
  orders: Order[];
}

const OrderList: React.FC<OrderListProps> = ({ orders }) => {
  const getStatusColor = (status: Order['status']) => {
    switch (status) {
      case '已完成':
        return 'success';
      case '已支付':
        return 'primary';
      case '待支付':
        return 'warning';
      default:
        return 'medium';
    }
  };

  return (
    <IonCard>
      <IonCardHeader>
        <IonCardTitle>通知管理</IonCardTitle>
      </IonCardHeader>
      <IonCardContent>
        {orders.map((order) => (
          <IonItem key={order.id} lines="full">
            <IonLabel>订单记录{order.id}</IonLabel>
            <IonBadge color={getStatusColor(order.status)} slot="end">
              {order.status}
            </IonBadge>
          </IonItem>
        ))}
      </IonCardContent>
    </IonCard>
  );
};

export default OrderList;